<template>
    <div>
        <Myhead headName="我的关注" @tojemp="toBack"/>
        <div class="follow" v-if="list.length > 0">
            <div class="follow-box" v-for="(item,index) in list" :key="index">
                <div class="pic">
                    <img v-if="item.head_img" :src="$axios.defaults.baseURL + item.head_img" alt="" >
                    <img v-else src="../../assets/user1.jpg" alt="" />
                </div>
                <div class="blogger-info">
                    <h5 class="blogger">{{item.nickname && item.nickname.length>6 ? item.nickname.substr(0,6) + '...':item.nickname}}</h5>
                    <span>{{item.create_date ? item.create_date.split('T')[0]:'未知'}}</span>
                </div>
                <div class="cancelFollow">
                    <button @click="cancelFollow(item.id)">取消关注</button>
                </div>
            </div>
        </div>
        <div class="follow" v-else>
            <p><span>暂无关注~</span></p>
        </div>
    </div>
</template>

<script>
import Myhead from '../../components/MyHeader'
export default {
    data(){
        return{
            list:[]
        }
    },
    components:{
        Myhead
    },
    methods:{
        getList(){
            this.$axios({
                url:'/user_follows',
                method:'get'
            }).then((res)=>{
                this.list = res.data.data;
            });
        },
        cancelFollow(followId){
            this.$axios({
                url:'/user_unfollow/'+followId,
                method:'get'
            }).then((res)=>{
                this.getList();
                this.$toast.success(res.data.message)
            });
        },
        toBack(){
            this.$router.back();
        }
    },
    mounted(){
        // for(let i=1;i<=1000;i++){
        //     this.$axios({
        //         url:'/user_follows/'+i,
        //         method:'get'
        //     })
        // }
        this.getList();
    }
}
</script>

<style lang="less" scoped>
.follow{
    .follow-box{
        display: flex;
        padding: 6.944vw 0;
        border-bottom:1px solid #D7D7D7;
        .pic{
           flex:2;
           img{
                width: 11.667vw;
                height: 11.667vw;
                padding:0 4.444vw 0 5vw;
                border-radius: 50%;
           }
        }
        .blogger-info{
            flex:5;
            .blogger{
                font-size: 4.444vw;
                font-weight: 400;
            }
            span{
                font-size: 3.889vw;
                color: #777777;
            }
        }
        .cancelFollow{
            flex:3;
            padding-top: 1.389vw;
            button{
               width: 20.833vw;
               height: 8.889vw;
               border-radius: 5.556vw;
               font-size: 3.333vw;
               background-color: #c0c0c0;
               color:#333;
            }
        }
    }
    >p{
        text-align: center;
        span{
           font-size: 3.889vw;
           color: #c0c0c0;
        }
    }
}
</style>